<template>
    <transition name="move">
        <div class="activityDetail" v-show="activityDetailFlag">
            <m-title :title="DetailList.title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <div class="activity-detail-wrapper">
                <!-- 培训信息 -->
                <div class="activity-detail-container" ref="detailContainer">
                    <div class="start-time">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">开始时间</span>
                        </div>
                        <div class="right">
                            <span class="text">{{DetailList.startdate}}</span>
                            |
                            <span class="text">{{DetailList.starttime}}</span>
                        </div>
                    </div>
                    <div class="end-time">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">结束时间</span>
                        </div>
                        <div class="right">
                            <span class="text">{{DetailList.enddate}}</span>
                            |
                            <span class="text">{{DetailList.endtime}}</span>
                        </div>
                    </div>
                    <div class="detail-address">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">培训地点</span>
                        </div>
                        <div class="right">
                            <span class="text">{{DetailList.address}}</span>
                        </div>
                    </div>
                    <div class="detail-all">
                        <div class="left">
                            <i class="icon"></i>
                            <span class="text">全天培训</span>
                        </div>
                        <div class="right">
                            <van-switch v-model="DetailList.isallday === '0' ? false : true" disabled />
                        </div>
                    </div>
                </div>
                <!-- 用户信息 -->
                <div class="activity-form">
                    <div class="form-title">
                        <i class="icon"></i>
                        <span class="text">用户报名填写信息</span>
                    </div>
                    <div class="form-info">
                        <div class="form-info-name">
                            <span class="text">姓名</span>
                            <input type="text" class="input-name" @blur="blurName" ref="inputName" v-model="nameVal" placeholder="请填写您的姓名" />
                        </div>
                        <div class="form-info-phone">
                            <span class="text">手机</span>
                            <input type="text" class="input-phone" @blur="blurPhone" v-model="phoneVal" placeholder="请填写完整的手机号码" />
                        </div>
                    </div>
                </div>
                <!-- 提醒时间 -->
                <div class="activity-hint">
                    <div class="left">
                        <i class="icon"></i>
                        <span class="text">提醒时间</span>
                    </div>
                    <!-- @click="mskShow" -->
                    <div class="right">
                        <span class="text">{{DetailList.warntime}}小时前</span>
                        <!-- <i class="hint-more"></i> -->
                    </div>
                </div>
                <div class="detail-button" @click="detailForm" ref="detailButton">{{orderVal}}</div>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!loadingFlag">
                <loading></loading>
            </div>
            <!-- 选择时间 -->
            <van-actionsheet v-model="mskShowTime" :actions="actions" cancel-text="取消" />
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import {Toast} from 'vant'
    import {Dialog} from 'vant'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    export default {
        props: {
            DetailList: {
                type: Object
            }
        },
        data () {
            return {
                returnShow: true,
                nameVal: "",
                phoneVal: "",
                id: "",
                orderVal: "预约提交",
                activityDetailFlag: false,
                checked: true,
                mskShowTime: false,
                time: '1小时前',
                loadingFlag: false,
                actions: [
                    {
                        name: '1小时前',
                        callback: this.handleClick
                    },
                    {
                        name: '8小时前',
                        callback: this.handleClick
                    },
                    {
                        name: '24小时前',
                        callback: this.handleClick
                    }
                ]
            }
        },
        methods: {
            show () {
                this.activityDetailFlag = true
            },
            hide () {
                this.nameVal = ""
                this.phoneVal = ""
                this.activityDetailFlag = false
            },
            mskShow () {
                this.mskShowTime = true
            },
            handleClick (picker, value) {
                this.time = picker.name
                this.mskShowTime = false
            },
            // 判断姓名
            blurName () {
                if (this.nameVal === "") {
                    Toast('姓名不能为空！')
                    return false
                }
                return true
            },
            // 判断手机号
            blurPhone () {
                if (this.phoneVal === "") {
                    Toast('手机号不能为空！')
                    return false
                }
                if (!this.checkphone(this.phoneVal)) {
                    Toast('手机号格式不正确！')
                    return false
                }
                return true
            },
            // 提交数据
            detailForm () {
                if (this.blurName() && this.blurPhone()) {
                    // 成功跳转
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=subact', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        truename: this.nameVal,
                        mobile: this.phoneVal,
                        actid: this.DetailList.id
                    }).then((res) => {
                        // 预约成功
                        if(res.data.rescode=='0000'){
                            Dialog.alert({
                                message: "报名成功"
                            }).then(() => {
                                this.hide()
                                if (this.DetailList.needcheck === '0') {
                                    this.$emit("changeSuccess", this.DetailList.id)
                                }
                                if (this.DetailList.needcheck === '1') {
                                    this.$emit("changeAudit", this.DetailList.id)
                                }
                            })
                        }else{
                            Dialog.alert({
                                message: res.data.resmsg
                            }).then(() => {
                                this.hide()
                            })
                        }
                    }).catch(function (error) {
                        console.log(error)
                    })
                }
                
            },
            // 根据页面resize判断键盘展开收起状态
            handleResize () {
                var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
                // 键盘展开
                if (clientHeight > nowClientHeight) {
                    this.$refs.detailContainer.style.display = 'none'
                    this.$refs.detailButton.style.display = 'none'
                } else {// 键盘收起
                    this.$refs.detailContainer.style.display = 'block'
                    setTimeout(() => {
                        this.$refs.detailButton.style.display = 'block'
                    },200)
                } 
            },
            // 判断手机型号
            isAndroid () {
                let u = navigator.userAgent
                let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
                return isAndroid
            },
            // 验证手机号
            checkphone (phone) {
                if (!(/^1[34578]\d{9}$/.test(phone))||phone=="") {
                    return false
                } else {
                    return true
                }
            }
        },
        components: {MTitle,Loading,Scroll},
        mounted () {
            window.addEventListener('resize', this.handleResize)
        },  
        watch: {
            DetailList (newVal) {
                if (newVal.address) {
                    this.loadingFlag = true
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    .activityDetail
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #f0eff5
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .activity-detail-wrapper
            position: absolute
            top: 44px
            width: 100%
            bottom: 0
            .activity-detail-container
                width: 100%
                height: 160px
                background: #fff
                margin-top: 20px
                padding: 0 15px
                box-sizing: border-box
                .start-time,.end-time,.detail-address,.detail-all
                    width: 100%
                    height: 40px
                    line-height: 40px
                    border-bottom: 1px solid #eee
                    display: flex
                    align-items: center
                    .left
                        width: 100px
                        flex: 0 0 100px
                        .icon
                            background: url('./icon1.png') no-repeat
                            width: 18px
                            height: 18px
                            background-size: 100% 100%
                            display: inline-block
                            vertical-align: middle
                        .text
                            color: #0094d4
                            display: inline-block
                            vertical-align: middle
                    .right
                        flex: 1
                        text-align: right
                        color: #ccc
                        .text
                            color: #d40000
                .end-time
                    .left
                        .icon
                            background: url('./icon2.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #888
                    .right
                        .text
                            color: #888
                .detail-address
                    .left
                        .icon
                            background: url('./icon3.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #000
                    .right
                        ellipsis()
                        .text
                            color: #000
                            ellipsis()
                .detail-all
                    .left
                        .icon
                            background: url('./icon4.png') no-repeat
                            background-size: 100% 100%
                        .text
                            color: #000
                    .right
                        .van-switch
                            top: 6px
                            opacity: 1
            .activity-form
                width: 100%
                height: 135px
                background: #fff
                margin-top: 20px
                padding: 0 15px
                box-sizing: border-box
                .form-title
                    width: 100%
                    height: 40px
                    display: flex
                    align-items: center
                    border-bottom: 1px solid #eee
                    .icon
                        background: url('./icon5.png') no-repeat
                        width: 18px
                        height: 18px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        display: inline-block
                        font-size: 16px
                        vertical-align: middle
                        margin-left: 6px
                .form-info
                    .form-info-name,.form-info-phone
                        display: flex
                        height: 30px
                        line-height: 30px
                        align-items: center
                        margin-top: 10px
                        .text
                            width: 60px
                            flex: 0 0 60px
                            text-align: right
                        .input-name,.input-phone
                            flex: 1
                            border-radius: 0
                            border-bottom: 1px solid #eee
                            height: 30px
                            line-height: 30px
                            font-size: 16px
                            padding: 0 10px
                            box-sizing: border-box
                            margin-left: 8px
                            margin-right: 40px
                            width: 100%
                            overflow: hidden
            .activity-hint
                width: 100%
                height: 45px
                background: #fff
                margin-top: 20px
                padding: 0 15px
                box-sizing: border-box
                display: flex
                align-items: center
                .left
                    width: 90px
                    flex: 0 0 90px
                    .icon
                        display: inline-block
                        background: url('./icon6.png') no-repeat
                        width: 15px
                        height: 18px
                        background-size: 100% 100%
                        vertical-align: middle
                    .text
                        display: inline-block
                        margin-left: 2px
                        vertical-align: middle
                .right
                    flex: 1
                    font-size: 0
                    text-align: right
                    .text
                        display: inline-block
                        vertical-align: middle
                        font-size: 16px
                    .hint-more
                        display: inline-block
                        background: url('./mine-more.png') no-repeat
                        width: 16px
                        height: 16px
                        background-size: 100% 100%
                        vertical-align: middle
            .detail-button
                width: 268px
                height: 38px
                background: #f8624a
                color: #fff
                border-radius: 20px
                position: absolute
                bottom:  30px
                left: 50%
                margin-left: -134px
                text-align: center
                line-height: 38px
</style>